<template>
  <div class="mod-article">
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      @keyup.enter.native="dataFormSubmit()"
      label-width="80px"
      label-position="left"
    >
      <el-card header="添加文章">
        <el-card class="article-card">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="标题" prop="title">
                <el-input v-model="dataForm.title" placeholder="输入文章标题"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="简介" prop="description">
                <el-input
                  type="textarea"
                  :rows="3"
                  placeholder="请输入文章简介"
                  v-model="dataForm.description"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="article-card">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
              <el-form-item label="类型" prop="category">
                <el-cascader :options="options" v-model="dataForm.category"></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
              <el-form-item label="前台显示" prop="frontDisplay">
                <el-switch
                  v-model="dataForm.frontDisplay"
                  active-text="是"
                  inactive-text="否"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                ></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
              <el-form-item label="排序" prop="sort">
                <el-input-number v-model="dataForm.sort"></el-input-number>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
              <el-form-item label="推荐文章" prop="recommend">
                <el-switch
                  v-model="dataForm.recommend"
                  active-text="是"
                  inactive-text="否"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                ></el-switch>
              </el-form-item>
            </el-col>
          </el-row>
        </el-card>
        <el-card class="article-card">
          <el-row>
            <el-col :span="24">
              <tinymce-editor v-model="dataForm.content" ref="editor"></tinymce-editor>
            </el-col>
          </el-row>
        </el-card>
        <div class="footer">
          <el-button type="default">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit()">保存</el-button>
        </div>
      </el-card>
    </el-form>
  </div>
</template>

<script>
  import TinymceEditor from '../../common/editor'
  export default {
    components: {
      TinymceEditor
    },
    data () {
      return {
        frontDisplay: true,
        recommend: true,
        dataForm: {
          id: '',
          title: '',
          description: '',
          category: [],
          frontDisplay: '',
          recommend: '',
          content: '请在这里编写文章内容,本插件为免费版，如需增强功能可自行联系购买。',
          sort: 5
        },
        dataRule: {
          title: [
            { required: true, message: '标题不能为空', trigger: 'blur' }
          ],
          content: [
            { required: true, message: '文章内容不能为空', trigger: 'blur' }
          ]
        },
        options: [
          {
            value: '1',
            label: '研发部',
            children: [
              {
                value: '1',
                label: '后端组'
              },
              {
                value: '2',
                label: '前端组'
              }
            ]
          },
          {
            value: '2',
            label: '销售部',
            children: [
              {
                value: '1',
                label: '企宣组'
              },
              {
                value: '2',
                label: '活动组'
              }
            ]
          }
        ]
      }
    },
    methods: {
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            console.log('数据检查通过')
            console.log(this.dataForm)
          }
        })
      }

      // 功能性函数

    },
    mounted () {

    }
  }
</script>
<style scoped>
  .mod-article {
    padding: 0 10% 0 10%;
  }
  .article-card {
    margin-bottom: 10px;
  }
  .footer {
    display: flex;
    justify-content: center;
    width: 100%;
  }
</style>


